<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/element.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!--    bootstrap的css以及js还有组件库-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        body {
            background-color: #F4F6FA;
        }
        #bank{
            height: 100%;
        }
        a {
            text-decoration: none;
            color: white;
        }

        .bank-card {
            margin: 20px;
            height: 100%;
        }

        .card-manage {
            height: 50px;
            width: 100%;
            background-color: white;
            padding-top: 15px;
            padding-left: 20px;
            font-weight: bold;
        }

        .card-body1 {
            width: 100%;
            margin-top: 20px;
        }

        .card-body-one {
            width: 100%;
            height: 50px;
            padding-top: 15px;
            background-color: #26BABD;
            color: white;
            overflow: hidden;
        }

        .pic-upd {
            padding-left: 70%;
        }

        .upd {
            padding-left: 5px;
        }

        .del {
            color: white;
        }

        .pic-del {
            padding-left: 5px;
        }

        .bank-body {
            float: left;
        }

        .card-id {
            padding-left: 20px;
        }

        .card-body-two {
            width: 100%;
            height: 70px;
            padding-top: 10px;
            background-color: white;
            padding-left: 20px;
            font-size: 30px;
        }

        .btn-add {
            margin-top: 20px;
            margin-left: 46%;
            background-color: #26BABD;
            color: white;
            width: 100px;
            height: 50px;
            text-align: center;
            border-radius: 5px;
        }

        .span{
            color: red;
        }
        .modal-content {
            background-color: #F4F6FA;
        }

        .modal-body {
            margin-left: 10%;
        }

        td {
            padding-left: 20px;
            font-size: 18px;
        }

        tr {
            margin-top: 20px;
        }

        input {
            border-radius: 5px;
        }

        .btn {
            background-color: white;
        }

        .btn-upd {
            background-color: #26BABD;
            color: white;
        }

        .modal {
            width: 40%;
            margin-left: 30%;
        }

        select {
            width: 210px;
            height: 30px;
            border-radius: 5px;
            border: 1px solid;
        }
        .btn-del{
            color: white;
        }
    </style>
</head>
<script src="../../js/vue.js"></script>
<script src="../../element-ui/lib/index.js"></script>
<script src="../../js/axios.js"></script>
<body>
<div id="bank">
    <div class="bank-card">
        <div class="card-manage">
            银行卡管理
        </div>
        <el-table
                ref="multipleTable"
                stripe :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                border
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column
                    prop="bank.b_name"
                    label="银行名称"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="types.typename"
                    label="银行卡类型"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="bank_card"
                    label="银行卡号"
                    :formatter="card"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="money"
                    label="余额"
                    :formatter="money"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button
                            data-toggle="modal"
                            data-target="#updModal"
                            size="mini"
                            @click="updNumber(scope.row.bank_id)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            plain
                            class="btn-del"
                            @click="del(scope.row.bank_id)" onclick="remove()">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align:center;margin-top: 15px">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[1, 3, 5, 8]"
                    :page-size="pagesize"
                    :pager-count="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="list.length">
            </el-pagination>
        </div>
        <div>
            <button class="btn-add" data-toggle="modal" @click="addBankNumber" data-target="#addModal">
                新增
            </button>
        </div>
    </div>
<!--     模态框   修改 -->
    <div class="modal fade" id="updModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">修改银行卡信息</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
<!--                 模态框主体 -->
                <form id="modifine">
                    <div class="modal-body">
                            <table>
                                <input type="hidden" name="bank_id" v-model="bb.bank_id" v-text="upd.bank_id">
                                <tr>
                                    <td>银行：</td>
                                    <td colspan="2">
                                        <select name="b_id" v-model="bb.b_id">
                                            <option v-for="bs in sysbank" :value="bs.b_id">{{bs.b_name}}</option>
                                        </select>
                                    </td>
                                    <td><span class="span">*</span></td>
                                </tr>
                                <tr>
                                    <td>类别：</td>
                                    <td v-for="ts in bank_type">
                                        <input type="radio" v-model="bb.tid" :value="ts.tid" name="tid">{{ts.typename}}
                                    </td>
                                    <td><span class="span">*</span></td>
                                </tr>
                                <tr>
                                    <td>卡号：</td>
                                    <td colspan="2"><input type="text" name="bank_card" v-model="bb.bank_card" v-text="upd.bank_card"></td>
                                    <td><span class="span">*</span></td>
                                </tr>
                            </table>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn"
                                data-dismiss="modal">关闭
                        </button>
                        <button type="submit" class="btn btn-upd" onclick="editor()" @click="update(bb.bank_id,bb.bank_card,bb.b_id,bb.tid)">
                            提交更改
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
<!--     模态框   添加 -->
        <div class="modal fade" id="addModal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">添加银行卡信息</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <form id="append">
<!--                     模态框主体 -->
                        <div class="modal-body">
                            <table id="addtable">
                                    <tr>
                                        <td>银行：</td>
                                        <td colspan="2">
                                            <select name="b_id" v-model="add.b_id">
                                                <option>请选择银行</option>
                                                <option v-for="bs in sysbank" :value="bs.b_id">{{bs.b_name}}</option>
                                            </select>
                                        </td>
                                        <td><span class="span">*</span></td>
                                    </tr>
                                    <tr>
                                        <td>类别：</td>
                                        <td v-for="ty in bank_type">
                                            <input type="radio" name="tid" :value="ty.tid" v-model="add.tid">{{ty.typename}}
                                        </td>
                                        <td><span class="span">*</span></td>
                                    </tr>
                                    <tr>
                                        <td>卡号：</td>
                                        <td colspan="2"><input type="text" id="card" name="bank_card" v-model="add.bank_card" placeholder="请输入卡号"></td>
                                        <td><span class="span">*</span></td>
                                    </tr>
                            </table>
                        </div>

<!--                         模态框底部-->
                        <div class="modal-footer">
                            <button type="button" class="btn" data-dismiss="modal">
                                关闭
                            </button>
                            <button type="submit" class="btn add" @click="addBank(add.bank_card,add.b_id,add.tid)">
                                添加
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
</div>

<script type="text/javascript">
    function remove() {
        var msg = "确认删除？";
        if (confirm(msg)==true){
            alert("删除成功！！！");
            return true;
        }else{
            return false;
        }
    };

    function editor(){
        var msg = "确认修改？";
        if (confirm(msg)==true){
            alert("修改成功！！！");
            return true;
        }else{
            return false;
        }
    };

    let app = new Vue({
        el: '#bank',
        name: 'bankCard',
        data(){
            return {
                // 分页-默认第几页
                currentPage: 1,
                //分页-默认一页多少条
                pagesize: 5,
                selected: '',
                list: [],
                sysbank: [],
                bank_type: [],
                upd: {},
                add: {
                    bank_card: '',
                    b_id: '',
                    tid: ''
                },
                modify: {
                    bank_card: '',
                    bank_id: '',
                    b_id: '',
                    tid: ''
                },
                bb: {
                    b_id:'',
                    b_name: '',
                    tid: '',
                    bank_id: '',
                    bank_card: ''
                },
                banknumber: {
                    bank_id: '',
                    bank_card: '',
                    b_id: '',
                    tid: ''
                },
                bank_card: ''
            };
        },
        created() {
            axios.post('/bank').then(res => {
                        this.list = res.data.data;
                    });
        },
        methods: {
            //添加
            addBank(bank_card,b_id,tid){
                this.add.bank_card=bank_card;
                this.add.b_id=b_id;
                this.add.tid=tid;
                axios.post('http://localhost:8080/insert',"bank_card="+bank_card+"&b_id="+b_id+"&tid="+tid).then(res => {
                    this.add.bank_card=res.data.data.bank_card;
                    this.add.b_id=res.data.data.bank.b_id;
                    this.add.tid=res.data.data.types.tid;
                })
            },
            //修改
            update(bank_id,bank_card,b_id,tid) {
                this.bb.bank_id=bank_id;
                this.bb.bank_card=bank_card;
                this.bb.b_id=b_id;
                this.bb.tid=tid;
                axios.post('http://localhost:8080/update',"bank_id="+bank_id+"&bank_card="+bank_card+"&b_id="+b_id+"&tid="+tid).then(res => {
                    this.bb.bank_id=bank_id;
                    this.bb.bank_card=bank_card;
                    this.bb.b_id=b_id;
                    this.bb.tid=tid;
                })
            },
            // 分页显示
            handleSizeChange: function(val) {
                this.pagesize = val;
            },
            handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage;
            },
            //添加传递参数
            addBankNumber: function(){
                axios.post('http://localhost:8080/bank2').then(res => {
                    this.sysbank = res.data.data;
                });

                axios.post('http://localhost:8080/bank3').then(res => {
                    this.bank_type=res.data.data;
                });
            },
            //修改传递参数
            updNumber: function (bank_id) {
                axios.post('http://localhost:8080/showUpdate/', "bank_id=" + bank_id)
                    .then(response => {
                        this.upd = response.data.data;
                        this.bb.b_id=response.data.data.bank.b_id;
                        this.bb.b_name=response.data.data.bank.b_name;
                        this.bb.tid=response.data.data.types.tid;
                        this.bb.bank_id=response.data.data.bank_id;
                        this.bb.bank_card=response.data.data.bank_card;
                    });
                axios.post('http://localhost:8080/bank2').then(res => {
                    this.sysbank = res.data.data;
                });

                axios.post('http://localhost:8080/bank3').then(res => {
                    this.bank_type=res.data.data;
                });
            },
            //点击事件删除
            del(bank_id) {
                axios.post('http://localhost:8080/del',"bank_id="+bank_id).then(res => {

                });
                window.location.href="bankCard.html";
            },
            cut(path) {
                window.parent.cut(path);
            },
            //修改银行卡号格式
            card(row, column) {
                // 获取单元格数据
                // console.log(row[column.property])
                let card = row[column.property]
                if(card == null) {
                    return null;
                }
                return "**** **** **** "+card.substr(card.length-4,4);
            },
            //修改
            money(row, column) {
                // 获取单元格数据
                let money = row[column.property]
                if(money == null) {
                    return null;
                }
                return "****";
            },
        }
    });
</script>
</body>

</html>